<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Mixed Chart</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>

<body>

    <!-- 使用一个具有宽度和高度的 DOM 元素来容纳图表 -->
    <div id="myChart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('myChart'));

        // 示例数据
        var categories = ['A', 'B', 'C', 'D', 'E'];
        var barValues = [4, 7, 1, 5, 8];
        var lineValues = [10, 6, 3, 8, 12];

        // 指定图表的配置项和数据
        var option = {
            /*    title: {
                   text: 'Combined Bar and Line Chart'
               }, */
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                show: true, // 确保图例可见
                data: ['降雨量', '累计降雨'],
            },
            xAxis: {
                type: 'category',
                data: categories,
                axisTick: {
                    show: false // 不显示刻度线
                },
            },
            yAxis: [
                {
                    type: 'value',
                    name: '降雨量(mm)',
                    min: 0,
                    max: 15,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: true,
                    },
                    splitLine: {
                        show: false // 不显示网格线
                    }
                },
                {
                    type: 'value',
                    name: '累计降雨(mm)',
                    min: 0,
                    max: 15,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: true,
                    },
                    splitLine: {
                        show: false // 不显示网格线
                    }

                },

            ],
            series: [
                {
                    name: '降雨量',
                    type: 'bar',
                    data: barValues,
                    itemStyle: {
                        color: '#0998F8'
                    }
                },
                {
                    name: '累计降雨',
                    type: 'line',
                    yAxisIndex: 1,
                    data: lineValues,
                    itemStyle: {
                        color: '#0DCEA7'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

</body>

</html>